{% extends 'cms/cms_base.html' %}

{% block head %}
{#    以下三个是七牛上传文件需要的js#}
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
{#    <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>#}
    <script src="http://media.junpy.club/static-qiniu.js"></script>
    <script src="{{ url_for('static', filename="common/juneqiniu.js") }}"></script>
    <script src="{{ url_for('static',filename="cms/js/operate_banner.js") }}"></script>
{% endblock %}
{% block content_title %}
    六月论坛-轮播图列表
{% endblock %}
{% block content %}
    <div class="head-box">
        <button class="btn btn-warning pull-right" data-toggle="modal" data-target="#banner-dialog" id="add-banner">添加轮播图</button>
    </div>
    <table class="table table-bordered">
        <tr>
            <th class="text-center">名称</th>
            <th class="text-center">图片链接</th>
            <th class="text-center">跳转链接</th>
            <th class="text-center">优先级</th>
            <th class="text-center">创建时间</th>
            <th class="text-center">操作</th>
        </tr>
        {% for banner in banners %}
        <tr data-img-name="{{ banner.img_name }}" data-img-url="{{ banner.img_url }}" data-link-url="{{ banner.link_url }}" data-priority="{{ banner.priority }}" data-banner-id="{{ banner.id }}">
            <td class="col-md-2">{{ banner.img_name }}</td>
            <td class="col-md-4"><a href="{{ banner.img_url }}" target="_blank">{{ banner.img_url }}</a></td>
            <td class="col-md-3"><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>
            <td class="col-xs-1 text-center">{{ banner.priority }}</td>
            <td class="col-md-1">{{ banner.add_time }}</td>
            <td class="col-md-1">
                <button class="btn btn-info btn-xs" id="edit-banner-btn">编辑</button>
                <button class="btn btn-danger btn-xs" id="delete-banner-btn">删除</button>
            </td>
        </tr>
        {% endfor %}

    </table>
    {#    添加轮播图模态框#}
    <div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加轮播图</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">名称：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="img-name" placeholder="图片名称"
                                       name="img_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">图片：</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="img-url" placeholder="图片链接"
                                       name="img_url">
                            </div>
                            <button class="btn btn-info col-md-2" id="upload-btn">选择图片</button>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">跳转：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="link-btn" placeholder="跳转链接"
                                       name="link_url">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">权重：</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="priority" placeholder="优先级"
                                       name="priority">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="save-btn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}